<template>
  <div @click="activeHandle" class="ivz-edit-drawer"
       :class="!hidden || visible ? 'ivz-ied-visible' : ''">
    <a-drawer :width="model.drawerRate" :height="model.drawerRate"
            :maskClosable="model.maskClosable" :mask="model.mask"
            v-model:visible="visible" :placement="model.placement" :closable="false"
            :getContainer="false" :wrapStyle="{ position: 'absolute' }"
            :afterVisibleChange="afterVisibleChange">
      <template #title>
        <div class="ivz-do-item">
            <ul style="list-style: none; margin: 0px; padding: 0px;">
                <li style="float: left; width: 128px;">{{model.title}}</li>
                <li style="clear: both;"></li>
            </ul>
        </div>
      </template>
      <a-form style="width: 100%; min-height: 280px;" :labelAlign="model.align"
          :labelCol="model.layout == 'horizontal' ? model.labelCol : null" :layout="model.layout"
          :wrapperCol="model.layout == 'horizontal' ? model.wrapperCol : null" ref="viewModelRef">
        <div class="ivz-area-desc" v-if="metas.length == 0">
          <DragOutlined />可拖入表单组件
        </div>
        <draggable :list="metas" group="edit" @add="onAddHandle" :animation='200' component="a-row"
                   style="width: 100%; min-height: 280px; overflow-y: auto;" ghostClass="ivz-item-ghost" chosenClass="ivz-item-chosen"
                   :gutter="3" type="flex" align="top" justify="start">
          <template v-for="meta in metas" :key="meta.id">
            <a-col v-if="meta.type=='group'" span="24">
                <ivz-group-item :ref="meta.id" :view="model" :meta="meta" :data-id="meta.id"/>
            </a-col>
            <ivz-form-item v-else type="table" :meta="meta" :data-id="meta.id" @delMetaItem="delMetaItem" />
          </template>
        </draggable>
      </a-form>
      <div class="ivz-ied-fun">
        <div class="ivz-area-desc" v-if="funMetas.length == 0">
          <DragOutlined />可拖入功能组件
        </div>
        <draggable :list="funMetas" group="fun" style="width: 100%; height: 100%">
          <template v-for="meta in funMetas" :key="meta.id">
            <ivz-btn-item :meta="meta" :type="type" @remove="removeEditFunMeta"/>
          </template>
        </draggable>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import {ComponentType, PathSort} from "@/store/consts.js";
import {EventBus, MetaEventType} from "@/event";
import {mapMutations} from 'vuex'
import IvzBtnItem from "@/components/item/IvzBtnItem.vue";
import {DrawerEditTabMetas} from "@/metas/FormTabMetas";
import {MixinEditConfig} from "../MixinEditConfig"
import IvzFormItem from "@/components/item/IvzFormItem.vue";
import IvzGroupItem from "@/components/item/IvzGroupItem.vue";
import PreviewUtils from "@/utils/preview.utils";
import {DragOutlined} from '@ant-design/icons-vue'
export default {
    name: "IvzEditDrawer",
    mixins: [MixinEditConfig],
    components: {
        IvzFormItem, IvzGroupItem, IvzBtnItem, DragOutlined
    },
    data() {
        return {
          visible: true,
          hidden: false,
          drawerRate: 360,
        }
    },

    created() {
      this.meta['tabMetas'] = DrawerEditTabMetas;

      this.initEditMeta(this.meta);

      this.switchActiveMetaTo(this.meta);
      this.switchPathTo({name: this.meta.name
        , type: ComponentType.Edit, sort: PathSort.Edit})

      // 监听面包屑路径切换事件
      let _this = this;
      EventBus.listener(MetaEventType.path, path => {
        if(path.type != ComponentType.Edit) {
          _this.visible = false;
        } else {
          _this.visible = true
          _this.switchActiveMetaTo(_this.meta)
        }
      })
    },
  updated() { },
    methods: {
      ...mapMutations(['initEditMeta', 'switchPathTo', 'removeEditFunMeta']),
        getViewType() {
            return this.global.viewType[1];
        },
      afterVisibleChange(visible) {
        this.hidden = !visible;
      },
        getPageConfig() {
            let labelCol = this.model['labelCol']
            return {
                form: {
                    column: this.model.column,
                    layout: this.model.layout,
                    length: this.model.drawerRate,
                    addTitle: this.model.addTitle,
                    placement: this.model.placement,
                    editTitle: this.model.editTitle,
                    labelCol: this.model['labelCol'],
                    wrapperCol: this.model['wrapperCol'],
                    maskClosable: this.model.maskClosable
                },
                table: {
                    rowKey: this.model['keyField']
                },
                detail: {},
                search: {}
            }
        },
        resolverPageTemplate() {
            let model = this.model;
            let modalTemplates = this.resolverModalTemplates();

            let metasTemplate = PreviewUtils.resolverPageMetasTemplate(this.viewConfig.metas);
            let pageConfigTemplate = PreviewUtils.resolverPageConfigTemplate(this.viewConfig.config);
            let searchMetasTemplate = PreviewUtils.resolverPageSearchMetasTemplate(this.viewConfig.searchMetas);

            let modalConfigTemplate = "", createdMethodTemplate = "";
            let modalConfig = this.resolverModalConfig();
            Object.keys(modalConfig).forEach(permId => {
                let obj = modalConfig[permId];
                createdMethodTemplate += PreviewUtils.resolverPermCallbackTemplate(permId);
                modalConfigTemplate += (permId + ":" + PreviewUtils.resolverPermConfigTemplate(obj));
            });
            let placement = this.model['placement'] == 'top' ? ' placement="top"' : "";
            let maskClosable = this.model['maskClosable'] ? "" : ' :maskClosable="flase"'
            let htmlCode = `<html lang="zh-CN">
<head>
    <title>${model.comment}</title>
</head>
<body>
    <div id="app">
        <ivz-drawer-view :metas="metas" :search-metas="searchMetas" :config="config"${placement}${maskClosable}></ivz-drawer-view>
        ${modalTemplates}
    </div>
</body>
<script type="text/javascript">
    let vue = new Vue({
        el: "#app",
        data: function() {
            return {
                metas: ${metasTemplate},
                searchMetas: ${searchMetasTemplate},
                config: ${pageConfigTemplate},
                ${modalConfigTemplate}
            }
        },
        created: function() {
            ${createdMethodTemplate}
        },
        methods: {

        }
    });
<\/script>
</html>
    `;
        return htmlCode;
    }
}
}
</script>

<style>
.ivz-edit-drawer {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ivz-ied-visible {
  height: 100%;
}
.ivz-edit-drawer .ant-drawer-header {
    padding: 16px;
}

.ivz-edit-drawer .ant-modal-wrap, .ivz-edit-drawer .ant-modal-mask {
    z-index: 1150;
    position: absolute;
}

.ivz-drawer-view .ant-drawer {
    position: absolute;
}
.ivz-od-footer {
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 32px;
    margin: 0px;
    padding: 0px;
    z-index: 1008;
    list-style: none;
    position: absolute;
    background: #ffffff;
    border-top: 1px dashed #cccccc;
}
.ivz-ied-fun {
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 50px;
  padding:8px 24px;
  position: absolute;
  background: #ffffff;
  border-top: 1px solid #efefef;
}
.ivz-oo-left {
    float: left;
}
.ivz-ocd-drag {
    width: 100%;
    min-height: 320px;
}
</style>
